<template>
  <v-form ref="form" v-model="form.valid">
    <v-container class="contain">
      <div class="view">
        <v-row align="center" class="mt-4">
          <v-col cols="10">
            <span class="title-text">
              {{ $t('account') }}
            </span>
          </v-col>
          <v-col cols="12">
            <v-text-field
              v-model="form.account"
              :rules="accountRules"
              :counter="320"
              :label="$t('useemail')"
              required
              outlined
              persistent-hint
            />
          </v-col>
        </v-row>

        <v-row align="center">
          <v-col cols="10">
            <span class="title-text">
              {{ $t('password') }}
            </span>
          </v-col>
          <v-col cols="12">
            <v-text-field
              v-model="form.password"
              :rules="passwordRules"
              :label="$t('password')"
              required
              outlined
              type="password"
              persistent-hint
            />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <a
              text
              style="margin-left: 4px"
              class="blue--text text--lighten-3"
              @click="$router.push(localePath('/forgetpassword'))"
            >
              {{ $t('forgetpassword') }}?
            </a>
          </v-col>
        </v-row>

        <v-row no-gutters align="center" justify="center">
          <v-btn
            class="mt-10"
            elevation="2"
            rounded
            dark
            x-large
            color="#E22129FF"
            style="text-transform: none"
            @click="signIn"
          >
            {{ $t('login') }}
          </v-btn>
          <v-btn
            class="mt-10 ml-2"
            elevation="2"
            rounded
            x-large
            style="text-transform: none"
            @click="$router.push(localePath('/signup'))"
          >
            {{ $t('signup') }}
          </v-btn>
        </v-row>
      </div>
    </v-container>
  </v-form>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  name: 'SignIn',

  data() {
    return {
      valid: false,
      snackbar: false,
      form: {
        valid: false,
        account: '',
        password: ''
      },
      accountRules: [
        (v) => !!v || this.$t('accountrequire'),
        (v) => (v && v.length <= 320) || this.$t('accountnomore')
      ],
      passwordRules: [(v) => !!v || this.$t('passwordrequire')]
    };
  },
  methods: {
    ...mapMutations(['setLogin']),
    signIn() {
      const valid = this.$refs.form.validate();
      if (valid) {
        this.$api.post('/user/login', this.form, { getAll: true }).then((res) => {
          if (Number(res.code) === 1) {
            this.setLogin(true);
            setTimeout(() => {
              console.log(this.$route.query.from);
              if (this.$route.query.from) {
                // this.$router.replace(this.$route.query.from);
                // sessionStorage.fromSignin = 'true';
                location.replace(this.$route.query.from);
                return;
              }
              this.$router.push(this.localePath('/'));
            });
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
@media screen and (max-width: 600px) {
  .contain {
    .view {
      width: 80vw !important;
    }
  }
}
.contain {
  display: flex;
  align-items: center;
  justify-content: center;

  .view {
    width: 52vw;
    max-width: 1000px;
  }
}
.title-text {
  font-weight: bold;
}
</style>
